<link rel="import" href="../../html/polymer.html">

<link rel="import" href="chrome://resources/polymer/v1_0/paper-behaviors/paper-ripple-behavior.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
<link rel="import" href="../shared_vars_css.html">

<!--
List of customizable styles:

  --cr-checkbox-border-size
  --cr-checkbox-checked-box-color
  --cr-checkbox-label-color
  --cr-checkbox-label-padding-start
  --cr-checkbox-mark-color
  --cr-checkbox-ripple-checked-color
  --cr-checkbox-ripple-size
  --cr-checkbox-ripple-unchecked-color
  --cr-checkbox-size
  --cr-checkbox-unchecked-box-color
-->
<dom-module id="cr-checkbox">
  <template>
    <style>
      :host {
        -webkit-tap-highlight-color: transparent;
        align-items: center;
        cursor: pointer;
        display: flex;
        outline: none;
        user-select: none;

        /* Sizes. */
        --cr-checkbox-border-size: 2px;
        --cr-checkbox-size: 16px;
        --cr-checkbox-ripple-size: 40px;

        /* Derived sizes (offsets). */
        --cr-checkbox-ripple-offset: calc(var(--cr-checkbox-size)/2 -
            var(--cr-checkbox-ripple-size)/2 - var(--cr-checkbox-border-size));

        /* --cr-checked-color automatically flips for light/dark mode. */
        --cr-checkbox-checked-box-color: var(--cr-checked-color);
        --cr-checkbox-ripple-checked-color: var(--cr-checked-color);

        /* Light mode colors. */
        --cr-checkbox-checked-ripple-opacity: .2;
        --cr-checkbox-mark-color: white;
        --cr-checkbox-ripple-unchecked-color: var(--google-grey-900);
        --cr-checkbox-unchecked-box-color: var(--google-grey-700);
        --cr-checkbox-unchecked-ripple-opacity: .15;
      }

      @media (prefers-color-scheme: dark) {
        :host {
          /* Dark mode colors. */
          --cr-checkbox-checked-ripple-opacity: .4;
          --cr-checkbox-mark-color: var(--google-grey-900);
          --cr-checkbox-ripple-unchecked-color: var(--google-grey-500);
          --cr-checkbox-unchecked-box-color: var(--google-grey-500);
          --cr-checkbox-unchecked-ripple-opacity: .4;
        }
      }

      :host([disabled]) {
        cursor: initial;
        opacity: var(--cr-disabled-opacity);
        pointer-events: none;
      }

      #checkbox {
        background: none;
        border: var(--cr-checkbox-border-size) solid
            var(--cr-checkbox-unchecked-box-color);
        border-radius: 2px;
        box-sizing: border-box;
        cursor: pointer;
        display: block;
        flex-shrink: 0;
        height: var(--cr-checkbox-size);
        margin: 0;
        outline: none;
        padding: 0;
        position: relative;
        transform: none;  /* Checkboxes shouldn't flip even in RTL. */
        width: var(--cr-checkbox-size);
      }

      #checkmark {
        border-color: var(--cr-checkbox-mark-color);
        border-style: solid;
        border-width: 0 2px 2px 0;
        content: '';
        display: block;
        height: 73%;
        transform: scale(0) rotate(45deg);
        transform-origin: 100% 80%;
        width: 36%;
      }

      :host-context([dir='rtl']) #checkmark {
        transform-origin: 50% 14%;
      }

      :host([checked]) #checkbox {
        background: var(--cr-checkbox-checked-box-color);
        border-color: var(--cr-checkbox-checked-box-color);
      }

      :host([checked]) #checkmark {
        transform: scale(1) rotate(45deg);
        /* Only animate when showing checkmark. */
        transition: transform 140ms ease-out;
      }

      paper-ripple {
        --paper-ripple-opacity: var(--cr-checkbox-ripple-opacity,
            var(--cr-checkbox-unchecked-ripple-opacity));
        color: var(--cr-checkbox-ripple-unchecked-color);
        height: var(--cr-checkbox-ripple-size);
        left: var(--cr-checkbox-ripple-offset);
        outline: var(--cr-checkbox-ripple-ring, none);
        pointer-events: none;
        top: var(--cr-checkbox-ripple-offset);
        transition: color linear 80ms;
        width: var(--cr-checkbox-ripple-size);
      }

      :host([checked]) paper-ripple {
        --paper-ripple-opacity: var(--cr-checkbox-ripple-opacity,
            var(--cr-checkbox-checked-ripple-opacity));
        color: var(--cr-checkbox-ripple-checked-color);
      }

      :host-context([dir=rtl]) paper-ripple {
        left: auto;
        right: var(--cr-checkbox-ripple-offset);
      }

      #label-container {
        color: var(--cr-checkbox-label-color, var(--cr-primary-text-color));
        padding-inline-start: var(--cr-checkbox-label-padding-start, 20px);
        white-space: normal;
      }

      :host(.no-label) #label-container {
        display: none;
      }

      /* Hidden from UI, but not screen readers. */
      #ariaDescription {
        height: 0;
        overflow: hidden;
        width: 0;
      }
    </style>
    <div id="checkbox" tabindex$="[[tabIndex]]" role="checkbox"
        on-keydown="onKeyDown_" on-keyup="onKeyUp_" aria-disabled="false"
        aria-checked="false" aria-labelledby="label-container"
        aria-describedby="ariaDescription">
      <span id="checkmark"></span>
    </div>
    <div id="label-container" aria-hidden="true" part="label-container">
      <slot></slot>
    </div>
    <div id="ariaDescription" aria-hidden="true">[[ariaDescription]]</div>
  </template>
  <script src="cr_checkbox.js"></script>
</dom-module>
